<template>
    <div class="addGallery">
        <el-form :model="galleryForm"  ref="ruleForm" label-width="140px">
            <el-form-item label="标题" prop="region">
                <el-col :span="20">
                    <el-input v-model="galleryForm.title" placeholder="请输入标题"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="时间" prop="region">
                <el-col :span="20">
                        <el-date-picker
                                v-model="galleryForm.date"
                                value-format="yyyy-MM-dd"
                                type="date"
                                placeholder="选择日期"
                                class="input-area"
                        />
                </el-col>
            </el-form-item>
            <el-form-item v-show="operateType === 'edit'" label="图片展示：" prop="region" class="msTop">
                <img class="imgSize" :src="galleryForm.picture">
            </el-form-item>
            <el-form-item :label="operateType === 'edit' ? '修改图片：': '上传图片'" class="msTop">
                <el-upload
                        class="upload-demo"
                        action="http://39.106.171.39:8011/mbl/FileController/uploadFile"
                        ref="newsUpload"
                        :on-change="handleFileChange"
                        :file-list="galleryFileList"
                        :auto-upload="false">
                    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload" :loading="fileLoading">上传到服务器</el-button>
                    <!--          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
                </el-upload>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="addSubmit" :loading="loading">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import { addGallery,updateGallery,uploadFile } from '@/api/memberManage'
    export default {
        name: "AddGallery",
        props: {
            operateType: {
                type: String,
                default: () => 'add'
            },
            galleryInfo: {
                type: Object,
                default: () => {
                    return {
                        id: '',
                        title: '',
                        picture: '' ,
                        date: '',
                    }
                }
            }
        },
        watch: {
            galleryInfo: {
                handler(newVal, objVal) {
                    if(newVal !== objVal){
                        this.galleryForm = newVal
                    }
                },
            }
        },
        data() {
            return {
                loading: false,
                fileLoading: false,
                successImagUrl: '',
                galleryForm: this.galleryInfo,
                galleryFileList: []
            }
        },
        methods:{
            async addSubmit(){
                if(this.operateType === 'add'){
                    try {
                        this.galleryForm.picture = this.successImagUrl
                        this.loading = true
                        await addGallery(this.galleryForm)
                        this.$message({
                            type: 'success',
                            message: '成功'
                        })
                        this.$emit('updateTable')
                    } catch (e) {
                        console.log( new Error(e))
                    }
                    this.loading = false
                } else {
                    try {
                        this.galleryForm.picture = this.successImagUrl ? this.successImagUrl : this.galleryInfo.picture
                        this.galleryForm.id = this.galleryInfo.id
                        this.loading = true
                        await updateGallery(this.galleryForm)
                        this.$message({
                            type: 'success',
                            message: '成功'
                        })
                        this.$emit('updateTable')
                    } catch (e) {
                        console.log( new Error(e))
                    }
                    this.loading = false
                }
            },
            handleFileChange(file, FileList){
                this.galleryFileList = FileList
            },
            async submitUpload(){
                let formData = new FormData()
                formData.append('file', this.galleryFileList[0].raw)
                // this.newsFileList.forEach(function (file) {
                //   formData.append("file", file.raw, file.name);
                // })
                this.fileLoading = true
                const res = await uploadFile(formData)
                this.successImagUrl = res.message
                this.$message({
                    type: 'success',
                    message: '上传成功'
                })
                this.fileLoading = false
            },
        }
    }
</script>

<style lang="scss" scoped>
    .addGallery{
        .msTop{
            margin-top: 20px;
            .imgSize{
                width: 50px;
                height: 50px;
            }
        }
        .upload, .submit{
            font-size: 16px;
            background: #cccccc;
            height: 35px;
            width: 70px;
        }
        .upload{
            color: #D0021B;
        }
        .submit{
            color: #3D434F;
        }
        /deep/ .el-form-item {
            margin-bottom: 15px;
        }
        /deep/ .el-form-item__label {
            font-size: 14px;
        }
        /deep/ .el-input__inner, .el-textarea__inner, .textarea__inner {
            font-size: 12px;
        }
    }

</style>